<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h1>当前求和放大10倍为{{ $store.getters.bigSum }}</h1>
    <h1>学校{{ school}} 学科{{subject}}</h1>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">奇数再加+</button>
    <button @click="incrementWait">等一等再+</button>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  name: "Count",
  data() {
    return {
      num: 1, //选择数
    };
  },
  methods: {
    increment() {
       this.$store.dispatch('jia', this.num)
    },
    decrement() {
       this.$store.dispatch('jian',this.num)
    },
    incrementOdd() {
      // if (this.$store.state.sum % 2) {
      //   this.$store.dispatch('jia', this.num)
      // }
      this.$store.dispatch('jiaOdd', this.num)
    },
    incrementWait() {
      // setTimeout(() => {
      //   this.$store.dispatch('jia', this.num)
      // }, 500);
      this.$store.dispatch('jiaWait', this.num)
    },
  },
  mounted() {

	},
  computed: {
    // sum(){
    //     return this.$store.state.sum
    // },
    // school(){
    //     return this.$store.state.school
    // },
    // subject(){
    //     return this.$store.state.subject
    // }
    // ...mapState({sum:'sum',school:'school',subject:'subject'})
    ...mapState(['sum','school','subject']),
    //...mapGetters({bigSum:'bigSum'})
    ...mapGetters(['bigSum'])
  }
};
</script>

<style>
button {
  margin-left: 5px;
}
</style>